.tabs-nav {
    margin: 0;
    padding: 0;
    border-bottom: $tabs-border-width solid $tabs-border-color;
    box-shadow: $tabs-box-shadow;
    >ul.tabs-ul {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
        display: flex;
        flex-wrap: wrap;
        >.tabs-label {
            padding: $tabs-label-padding-y $tabs-label-padding-x;
            cursor: pointer;
            border-top-left-radius: $tabs-label-border-radius;
            border-top-right-radius: $tabs-label-border-radius;
        }
        >.tabs-label-disabled {
            color: $tabs-label-disabled-color;
            pointer-events: none;
        }
    }
    &.tabs-underline {
        .tabs-label {
            border-bottom: $tabs-label-active-border-width solid transparent;
            &.tabs-label-active {
                color: $tabs-label-active-color;
                border-bottom: $tabs-label-active-border-width solid 
                    $tabs-label-active-color;
            }
        }
    }
    &.tabs-outline {
        box-shadow: $tabs-box-shadow-outline;
        >ul.tabs-ul {
            margin-bottom: -$tabs-label-active-border-width;
        }
        .tabs-label {
            border-width: $tabs-label-active-border-width;
            border-style: solid;
            border-color: transparent transparent $tabs-border-color;
            &.tabs-label-active {
                border-bottom-width: $tabs-label-active-border-bottom-width;
                color: $tabs-label-active-color;
                border-color: $tabs-border-color $tabs-border-color $white;
                box-shadow: $tabs-label-active-box-shadow;
            }
        }
    }
}

.tabs-content {
    padding: $tabs-content-padding-y $tabs-content-padding-x;
    display: none;
    &.tabs-content-active{
        display: block;
    }
}